<template>
    <h2>series同x轴长度一样的方式-tooltip.trigger='axis'</h2>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let res = [
        {
            "basicinfoCreditcode": null,
            "province": "北京",
            "provinceCode": "110000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "天津",
            "provinceCode": "120000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "河北",
            "provinceCode": "130000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "冀北",
            "provinceCode": "130100",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "山西",
            "provinceCode": "140000",
            "num": 11,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "山东",
            "provinceCode": "370000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 0
        },
        {
            "basicinfoCreditcode": null,
            "province": "上海",
            "provinceCode": "310000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "江苏",
            "provinceCode": "320000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "浙江",
            "provinceCode": "330000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        },
        {
            "basicinfoCreditcode": null,
            "province": "安徽",
            "provinceCode": "340000",
            "num": 0,
            "orgId": null,
            "orgNum": 0,
            "selfNum": 0,
            "noSelfNum": 0,
            "isSelf": 1
        }
    ]

    let xdata = [];
    res.map((v, k) => {
        xdata.push(v.province)
        v['num'] = (k + 1) * 100
    })
    let xdataActive = [];
    let legends = ['xxx图例', 'uuu图例']
    const seriesFn = (dres) => {
        let newSeries = [];
        dres.map((item, index) => {
            let seriesItem = {
                data: [],
                barWidth: '20%',
                barGap: '-100%',
                name: legends[item.isSelf],
                type: 'bar',
            };
            for (let i = 0; i < dres.length; i++) {
                let seriesItemDataItem_item = {
                    value: item.num,
                    itemStyle: {
                        opacity: i == index ? 1 : 0,
                    },
                }
                seriesItem.data.push(seriesItemDataItem_item)
            }
            newSeries.push(seriesItem)
        })
        return newSeries;
    }
    let series_ = seriesFn(res);
    console.log(series_)
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter(ps) {
                let activeK = null;
                ps.filter((v, k) => {
                    if (v.data.itemStyle.opacity == 1) {
                        activeK = k;
                    }
                });
                // 图例事件部分注释没用 在这里加判断就可以
                if (activeK != 0 && !activeK) return;
                let activeData = ps[activeK];
                // 我使用的渐变色 单色自行修改
                let colorStops = activeData.color.colorStops;
                let color = ` background-image: -webkit-linear-gradient(top,  ${colorStops[0].color}, ${colorStops[1].color}); 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; `
                return `
        <span style='${color}'>${activeData.data.value}</span>
      `;
            }
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                formatter: function (val) {
                    return val;
                },
                rich: {
                    a: {
                        color: 'red',
                    },
                    b: {
                        height: 2,
                        width: 20,
                        backgroundColor: 'red'
                    },
                    c: {
                        height: 2
                    },
                    a1: {
                        color: 'blue',
                    },
                    b1: {
                        height: 2,
                        width: 20,
                        backgroundColor: 'blue'
                    }
                }
            },
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: legends
        },
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ffa39e' // 0% 处的颜色
                }, {
                    offset: 1, color: '#f5222d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#91d5ff' // 0% 处的颜色
                }, {
                    offset: 1, color: '#1890ff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        ],
        series: series_
    };
    myChart.setOption(option);


    let legendSelected = {};
    myChart.on('click', (e) => {
        let getOptionData = myChart.getOption();
        let legItem = getOptionData.series[e.dataIndex]
        if (Object.values(legendSelected) != 0) {
            if (!legendSelected[legItem.name]) {
                return;
            }
        }

        let xdata_Clone = JSON.parse(JSON.stringify(xdata))
        xdata_Clone.map((v, k) => {
            if (v == e.name) {
                let is = res[k].isSelf;
                xdata_Clone[k] = !is ? `{a|${v}}\n{c|}\n{b|}` : `{a1|${v}}\n{c|}\n{b1|}`
            }
        })
        myChart.setOption(
            {
                xAxis: {
                    data: xdata_Clone,
                },
                animation: false
            }
        );
        requestAnimationFrame(() => {
            myChart.setOption({ animation: true })
        })
    })

    myChart.on('legendselectchanged', (e) => {
        let selected_ = e.selected;
        legendSelected = selected_;
        // let series_clone = JSON.parse(JSON.stringify(series_));
        // // 克隆一下数据
        // let high_series_dataItemKeys = []
        // series_clone.forEach((v, k) => {
        //   if (selected_[v.name]) {
        //     v.data.map((vv, kk) => {
        //       if (vv.itemStyle.opacity == 1) {
        //         high_series_dataItemKeys.push(k);
        //       }
        //     })
        //   }

        // })
        // console.log(high_series_dataItemKeys)

        // series_clone.forEach((v, k) => {
        //   // 选中的数据判断
        //   if (selected_[v.name]) {
        //     v['tooltip'] = { show: false }
        //     if (high_series_dataItemKeys.includes(k)) {
        //       v['tooltip'] = { show: true }
        //     }
        //   }
        // })
        myChart.setOption({
            // series: series_clone,
            xAxis: {
                data: xdata,
            }
        })
    })
}
onMounted(() => {
    initChart();
})
</script>

<style scoped>
.chart {
    width: 1000px;
    height: 600px;
}
</style>